<template>
  <div class="price-table-container" tabindex="0" ref="priceTableContainer">
    <div class="price-table" ref="tableContainer" :class="{ 'scrollable': allowScroll }">
      <!-- 统一的价格表格 -->
      <div class="price-table-content">
        <div v-for="(item, index) in visibleOrderBook" :key="`order-${index}`"
          class="price-row"
          :class="[
            item.rowType,
            item.color,
            { 'separator-row': item.isSeparator }
          ]">

          <!-- 分割线行 - 直接显示分割线 -->
          <template v-if="item.isSeparator">
            <div class="price-separator-placeholder">
              <!-- 分割线直接在这里显示 -->
            </div>
          </template>

          <!-- 普通价格行 -->
          <template v-else>
            <!-- 第一列：订单数量显示（可点击撤单） -->
            <div class="order-display-col"
              :class="[
                {
                  'has-orders': getBuyOrderCount(item.price) > 0 || getSellOrderCount(item.price) > 0,
                  'clickable': getBuyOrderCount(item.price) > 0 || getSellOrderCount(item.price) > 0
                },
                getFirstColumnFillClass(item)
              ]"
              @click="handleFirstColumnClick(item, $event)"
              :title="(getBuyOrderCount(item.price) > 0 || getSellOrderCount(item.price) > 0) ? '点击撤销当前价位的挂单' : ''">
              <!-- 买单数量显示 -->
              <span v-if="getBuyOrderCount(item.price) > 0" class="col-value buy-count order-count-text">
                {{ getBuyOrderDisplayPrefix(item.price) }}{{ getBuyOrderCount(item.price) }}
              </span>
              <!-- 卖单数量显示 -->
              <span v-else-if="getSellOrderCount(item.price) > 0" class="col-value sell-count order-count-text">
                {{ getSellOrderDisplayPrefix(item.price) }}{{ getSellOrderCount(item.price) }}
              </span>
            </div>

            <!-- 第二列：买量 -->
            <div class="buy-volume-col clickable"
              @click="handleBuyVolumeClick(item, index, $event)"
              @contextmenu.prevent="handleBuyVolumeClick(item, index, $event)"
              :class="{
                active: isSelected(item.section, 'buy', index),
                disabled: !canBuy(item)
              }">
              <span class="col-value">{{ getBuyVolumeDisplay(item) }}</span>
            </div>

            <!-- 第三列：价格 -->
            <div class="price-col clickable"
              :class="getPriceColumnClass(item)"
              :style="{ background: item.color }"
              @click="handlePriceClick(item, index)"
              title="点击价格列启用滚动">
              {{ formatPrice(item.price) }}
            </div>

            <!-- 第四列：卖量 -->
            <div class="sell-volume-col clickable"
              @click="handleSellVolumeClick(item, index, $event)"
              @contextmenu.prevent="handleSellVolumeClick(item, index, $event)"
              :class="{
                active: isSelected(item.section, 'sell', index),
                disabled: !canSell(item)
              }">
              <span class="col-value">{{ getSellVolumeDisplay(item) }}</span>
            </div>

            <!-- 第五列：市价单挂单数（带背景色） -->
            <div class="total-volume-col">
              <span v-if="getMarketOrderDisplay(item)"
                    :class="getMarketOrderClass(item)"
                    class="market-order-number">
                <span class="col-value">{{ getMarketOrderDisplay(item) }}</span>
              </span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { debounce } from '@/utils/titleBarUtils'

interface OrderData {
  price: number
  buyVolume: number
  sellVolume: number
  level: string
  color?: string
  section?: 'sell' | 'buy' | 'gap' | 'separator'  // 数据所属区域
  rowType?: string  // 行类型
  isSeparator?: boolean  // 是否为分割线
}

interface RenderOrderBook {
  price: number,
  buyVolume: number,
  sellVolume: number,
  level: string,
  color: string
}

// 扩展类型，用于渲染时的数据结构
interface ExtendedOrderData extends RenderOrderBook {
  section: 'sell' | 'buy' | 'separator'
  rowType: string
  originalIndex: number
  isSeparator?: boolean
}

interface SelectedCell {
  type: 'sell' | 'buy'
  field: 'cancel' | 'buy' | 'sell' | 'price'
  value: number
  data: OrderData
  index: number
  quantity?: number
}

// Props
const props = defineProps<{
  processedOrderBook: {
    sell: Array<RenderOrderBook>
    buy: Array<RenderOrderBook>
    merged?: Array<ExtendedOrderData>  // 新增：合并后的完整数据
  }
  selectedCell?: SelectedCell | null
  fontSize: number
  cellHeight?: number
  lightOrderQuantity: number
  heavyOrderQuantity: number
  activeOrders: any[]
  priceTick?: number
  orderType?: string  // A/B模式
  options?: {
    noCombo?: boolean
  }
  // 新增：持仓数据props，用于k+/p+数字显示判断
  longPosition?: number    // 多头持仓
  shortPosition?: number   // 空头持仓（负数）
}>()

// Emits
const emit = defineEmits<{
  orderClick: [orderType: 'buy' | 'sell', data: OrderData, index: number, event?: MouseEvent, section?: 'sell' | 'buy' | 'separator']
  cancelClick: [section: 'sell' | 'buy' | 'separator', data: OrderData, index: number, event?: MouseEvent]
  placeOrder: [orderType: 'buy' | 'sell', price: number, quantity: number, isHeavy: boolean, isMarket?: boolean]
  replaceOrder: [orderType: 'buy' | 'sell', price: number, quantity: number, isHeavy: boolean, existingRefs: string[]]
  cancelPriceOrders: [price: number]  // 撤销指定价位的所有挂单
}>()

// Template refs
const tableContainer = ref<HTMLElement>()
const priceTableContainer = ref<HTMLElement>()

// 响应式状态
const allowScroll = ref(false)  // 是否允许滚动
const visibleRowsPerSection = ref(15)  // 每个区域显示的行数（分割线上下各15行）

// 价格格式化函数
const formatPrice = (price: number | null | undefined): string => {
  if (!price && price !== 0) return '';
  
  const priceTick = props.priceTick || 1;
  
  // 根据价格间距确定小数位数
  let decimalPlaces = 0;
  if (priceTick < 1) {
    // 计算小数位数
    const tickStr = priceTick.toString();
    const decimalIndex = tickStr.indexOf('.');
    if (decimalIndex !== -1) {
      decimalPlaces = tickStr.length - decimalIndex - 1;
    }
  }
  
  return price.toFixed(decimalPlaces);
};

// 未成交订单统计 (价格 -> Map<订单引用, {数量, 是否平仓单}>)
const buyPendingOrders = ref<Map<number, Map<string, {quantity: number, isClosing: boolean}>>>(new Map())
const sellPendingOrders = ref<Map<number, Map<string, {quantity: number, isClosing: boolean}>>>(new Map())

// 市价单挂单数据结构：Map<价格, 数量>
const marketBuyOrders = ref<Map<number, number>>(new Map()) // 市价买入挂单（显示在空单区域第五列）
const marketSellOrders = ref<Map<number, number>>(new Map()) // 市价卖出挂单（显示在多单区域第五列）

// 最近成交价位跟踪
const recentlyFilledInfo = ref<{ price: number | null, type: 'buy' | 'sell' | null }>({ price: null, type: null })

// 计算属性：处理分割线插入和上下显示逻辑
const visibleOrderBook = computed((): ExtendedOrderData[] => {
  // 直接使用useMarketData中合并好的数据
  const allData: ExtendedOrderData[] = props.processedOrderBook.merged || []

  // 根据滚动状态决定显示逻辑
  if (allowScroll.value) {
    // 滚动模式：显示所有数据，在买卖盘交界处插入分割线
    let separatorIndex = -1
    for (let i = 0; i < allData.length - 1; i++) {
      const current = allData[i]
      const next = allData[i + 1]
      if (current.section === 'sell' && next.section === 'buy') {
        separatorIndex = i + 1
        break
      }
    }

    if (separatorIndex >= 0) {
      allData.splice(separatorIndex, 0, {
        price: 0,
        buyVolume: 0,
        sellVolume: 0,
        level: 'separator',
        color: '#c0c0c0',
        isSeparator: true,
        section: 'separator' as any,
        rowType: 'separator-row',
        originalIndex: -1
      })
    }
    return allData
  }

  // 非滚动模式：找到买卖盘交界处，以此为中心向上下展示连贯数据
  let separatorIndex = -1
  for (let i = 0; i < allData.length - 1; i++) {
    const current = allData[i]
    const next = allData[i + 1]
    if (current.section === 'sell' && next.section === 'buy') {
      separatorIndex = i + 1
      break
    }
  }
  if (separatorIndex === -1) {
    // 如果没有找到交界处，使用数据中点
    separatorIndex = Math.floor(allData.length / 2)
  }

  // 计算显示范围，确保表格铺满容器
  const totalDisplayRows = visibleRowsPerSection.value * 2 + 1 // 包括分割线

  // 确保有足够的数据填满容器，允许超出边界
  const halfRows = visibleRowsPerSection.value
  let startIndex = Math.max(0, separatorIndex - halfRows)
  let endIndex = Math.min(allData.length, separatorIndex + halfRows)

  // 获取要显示的连贯数据
  let displayData = allData.slice(startIndex, endIndex)

  // 如果数据不够填满容器，从另一端补充
  while (displayData.length < totalDisplayRows - 1 && (startIndex > 0 || endIndex < allData.length)) {
    if (startIndex > 0) {
      const additionalStart = Math.max(0, startIndex - 1)
      displayData = [...allData.slice(additionalStart, startIndex), ...displayData]
      startIndex = additionalStart
    }
    if (displayData.length < totalDisplayRows - 1 && endIndex < allData.length) {
      const additionalEnd = Math.min(allData.length, endIndex + 1)
      displayData = [...displayData, ...allData.slice(endIndex, additionalEnd)]
      endIndex = additionalEnd
    }
  }

  // 在正确位置插入分割线
  const relativeSeparatorIndex = separatorIndex - startIndex
  if (relativeSeparatorIndex >= 0 && relativeSeparatorIndex <= displayData.length) {
    // 获取分割线上下的价格用于日志
    const priceAbove = relativeSeparatorIndex > 0 ? displayData[relativeSeparatorIndex - 1].price : 'N/A'
    const priceBelow = relativeSeparatorIndex < displayData.length ? displayData[relativeSeparatorIndex].price : 'N/A'
    
    displayData.splice(relativeSeparatorIndex, 0, {
      price: 0,
      buyVolume: 0,
      sellVolume: 0,
      level: 'separator',
      color: '#c0c0c0',
      isSeparator: true,
      section: 'separator' as any,
      rowType: 'separator-row',
      originalIndex: -1
    })
    
  }

  return displayData
})

// 处理第一列点击事件（撤销当前价位的挂单）
const handleFirstColumnClick = (item: OrderData, event: MouseEvent) => {
  if (item.isSeparator) return

  // 只处理左键点击
  if (event.button !== 0) return

  const price = item.price
  const buyOrderCount = getBuyOrderCount(price)
  const sellOrderCount = getSellOrderCount(price)

  // 检查该价位是否有挂单
  if (buyOrderCount === 0 && sellOrderCount === 0) {
    return
  }

  // 发送撤销指定价位所有挂单的事件
  emit('cancelPriceOrders', price)
}

// 处理价格列点击事件
const handlePriceClick = (data: OrderData, _index: number) => {
  // 启用滚动模式
  allowScroll.value = true

  // 使用nextTick等待DOM更新后，滚动到分割线位置（保持当前视图）
  nextTick(() => {
    setTimeout(() => {
      if (!tableContainer.value) return
      
      // 在滚动模式下，visibleOrderBook已经包含了插入的分割线
      // 直接在渲染后的数据中查找分割线
      const renderedData = visibleOrderBook.value
      let separatorIndex = -1
      
      for (let i = 0; i < renderedData.length; i++) {
        if (renderedData[i].isSeparator) {
          separatorIndex = i
          break
        }
      }
      
      if (separatorIndex === -1) {
        separatorIndex = Math.floor(renderedData.length / 2)
      }
      
      // 计算滚动位置，使分割线保持在容器中央
      const containerHeight = tableContainer.value.clientHeight
      const rowHeight = props.cellHeight || 18
      const separatorOffsetFromTop = separatorIndex * rowHeight
      const containerCenter = containerHeight / 2
      const targetScrollTop = separatorOffsetFromTop - containerCenter
      
      // 应用滚动，保持分割线居中
      tableContainer.value.scrollTop = Math.max(0, targetScrollTop)
    }, 50)
  })
}

// 取消滚动模式
const cancelScrollMode = () => {
  allowScroll.value = false
}

const restoreCenterView = () => {
  allowScroll.value = false
  
  // 使用nextTick确保allowScroll变化后DOM已更新
  nextTick(() => {
    if (tableContainer.value) {
      tableContainer.value.scrollTop = 0
    }
    calculateVisibleRows()
  })
}

// 滚动到指定价格位置（保持分割线居中）
const scrollToPricePosition = (targetPrice: number) => {
  if (!tableContainer.value) return

  // 计算分割线的位置，确保始终居中
  const containerHeight = tableContainer.value.clientHeight
  const targetScrollTop = containerHeight / 2

  // 设置滚动位置，使分割线保持居中
  tableContainer.value.scrollTop = targetScrollTop
}

// 新的居中滚动函数：滚动到指定价格但保持分割线居中
const scrollToPricePositionCentered = (targetPrice: number) => {
  if (!tableContainer.value || !allowScroll.value) return

  // 在滚动模式下，找到目标价格在数据中的位置
  const allData = props.processedOrderBook.merged || []
  let targetIndex = -1
  
  // 找到目标价格的索引
  for (let i = 0; i < allData.length; i++) {
    if (allData[i].price === targetPrice) {
      targetIndex = i
      break
    }
  }

  if (targetIndex === -1) return

  // 计算滚动位置：让目标价格显示在容器中间附近，但保持分割线的相对位置
  const containerHeight = tableContainer.value.clientHeight
  const rowHeight = props.cellHeight || 18
  const visibleRows = Math.floor(containerHeight / rowHeight)
  
  // 找到分割线的位置
  let separatorIndex = -1
  for (let i = 0; i < allData.length - 1; i++) {
    const current = allData[i]
    const next = allData[i + 1]
    if (current.section === 'sell' && next.section === 'buy') {
      separatorIndex = i + 1
      break
    }
  }

  if (separatorIndex === -1) {
    separatorIndex = Math.floor(allData.length / 2)
  }

  // 计算滚动位置，使分割线保持在容器中央
  const separatorOffsetFromTop = separatorIndex * rowHeight
  const containerCenter = containerHeight / 2
  const targetScrollTop = separatorOffsetFromTop - containerCenter

  // 应用滚动
  tableContainer.value.scrollTop = Math.max(0, targetScrollTop)
}

const isSelected = (type: 'sell' | 'buy' | 'gap' | any, field: 'cancel' | 'buy' | 'sell' | 'price', index: number) => {
  return props.selectedCell?.type === type &&
    props.selectedCell?.field === field &&
    props.selectedCell?.index === index
}

// 判断是否可以撤单
const canCancel = (item: OrderData) => {
  return item.section === 'sell' || item.section === 'buy'
}

// 判断是否可以买入
const canBuy = (item: OrderData) => {
  return item.section === 'buy' || item.section === 'gap'  // 买盘区域和间隔区域可以买入
}

// 判断是否可以卖出
const canSell = (item: OrderData) => {
  return item.section === 'sell' || item.section === 'gap'  // 卖盘区域和间隔区域可以卖出
}

// 判断当前挂单是否为平仓单（根据持仓情况判断）
const isClosingOrderByPosition = (orderType: 'buy' | 'sell'): boolean => {
  const currentLongPosition = props.longPosition || 0
  const currentShortPosition = Math.abs(props.shortPosition || 0)

  if (orderType === 'buy') {
    // 买单：如果有空头持仓，则为平仓单
    return currentShortPosition > 0
  } else {
    // 卖单：如果有多头持仓，则为平仓单
    return currentLongPosition > 0
  }
}

// 创建防抖版本的买量点击处理函数
const debouncedBuyVolumeClick = debounce((item: OrderData, isRightClick: boolean) => {
  let quantity = isRightClick ? props.heavyOrderQuantity : props.lightOrderQuantity
  
  // 右键点击空单区域进行市价买入平仓时，使用实际空单持仓量
  if (item.section === 'sell' && isRightClick && props.shortPosition) {
    const shortPositionAbs = Math.abs(props.shortPosition)
    if (shortPositionAbs > 0) {
      quantity = shortPositionAbs
    }
  }
  
  if (item.section === 'sell') {
    // 空单区域第二列：市价买入平仓
    executeMarketBuyOrder(quantity, isRightClick)
  } else if (item.section === 'buy') {
    // 多单区域第二列：正常挂多单

    // 判断当前挂单是否为平仓单
    const isClosing = isClosingOrderByPosition('buy')

    // A模式限制检查（传入isClosing参数，区分开仓单和平仓单）
    const aModeCheck = canPlaceOrderInAMode('buy', item.price, isClosing)

    // 收集所有需要撤销的【同类型】订单引用
    let allRefsToCancel: string[] = []

    if (!aModeCheck.canPlace && aModeCheck.existingPrices.length > 0) {
      // A模式下，如果其他价位有同类型挂单，先收集这些订单的引用
      for (const existingPrice of aModeCheck.existingPrices) {
        const priceOrders = buyPendingOrders.value.get(existingPrice)
        if (priceOrders) {
          // 只收集同类型订单的引用
          for (const [orderRef, orderInfo] of priceOrders.entries()) {
            if (orderInfo.isClosing === isClosing) {
              allRefsToCancel.push(orderRef)
            }
          }
        }
      }
    }

    // 检查当前价位是否有同类型的未成交订单
    // 优化：B模式下同价位挂单不撤销，而是累加；A模式下才撤销
    if (props.orderType === 'A') {
      const currentPriceOrders = buyPendingOrders.value.get(item.price)
      if (currentPriceOrders) {
        for (const [orderRef, orderInfo] of currentPriceOrders.entries()) {
          if (orderInfo.isClosing === isClosing) {
            allRefsToCancel.push(orderRef)
          }
        }
      }
    }

    // 如果有需要撤销的订单，发送撤销+重新挂单事件
    if (allRefsToCancel.length > 0) {
      emit('replaceOrder', 'buy', item.price, quantity, isRightClick, allRefsToCancel)
    } else {
      // 发送普通下单事件（B模式下同价位会累加）
      emit('placeOrder', 'buy', item.price, quantity, isRightClick, false)
    }
  } else {
    return
  }
}, 500) // 0.5秒防抖

// 处理买量列点击（多单区域挂多单 + 空单区域市价买入）
const handleBuyVolumeClick = (item: OrderData, index: number, event: MouseEvent) => {
  if (item.isSeparator) return

  const isRightClick = event.button === 2 || event.type === 'contextmenu'

  // 检查是否开启防连点
  if (props.options?.noCombo) {
    debouncedBuyVolumeClick(item, isRightClick)
    return
  }

  let quantity = isRightClick ? props.heavyOrderQuantity : props.lightOrderQuantity
  
  // 右键点击空单区域进行市价买入平仓时，使用实际空单持仓量
  if (item.section === 'sell' && isRightClick && props.shortPosition) {
    const shortPositionAbs = Math.abs(props.shortPosition)
    if (shortPositionAbs > 0) {
      quantity = shortPositionAbs
    }
  }
  
  if (item.section === 'sell') {
    // 空单区域第二列：市价买入平仓
    executeMarketBuyOrder(quantity, isRightClick)
  } else if (item.section === 'buy') {
    // 多单区域第二列：正常挂多单

    // 判断当前挂单是否为平仓单
    const isClosing = isClosingOrderByPosition('buy')

    // A模式限制检查（传入isClosing参数，区分开仓单和平仓单）
    const aModeCheck = canPlaceOrderInAMode('buy', item.price, isClosing)

    // 收集所有需要撤销的【同类型】订单引用
    let allRefsToCancel: string[] = []

    if (!aModeCheck.canPlace && aModeCheck.existingPrices.length > 0) {
      // A模式下，如果其他价位有同类型挂单，先收集这些订单的引用
      for (const existingPrice of aModeCheck.existingPrices) {
        const priceOrders = buyPendingOrders.value.get(existingPrice)
        if (priceOrders) {
          // 只收集同类型订单的引用
          for (const [orderRef, orderInfo] of priceOrders.entries()) {
            if (orderInfo.isClosing === isClosing) {
              allRefsToCancel.push(orderRef)
            }
          }
        }
      }
    }

    // 检查当前价位是否有同类型的未成交订单
    // 优化：B模式下同价位挂单不撤销，而是累加；A模式下才撤销
    if (props.orderType === 'A') {
      const currentPriceOrders = buyPendingOrders.value.get(item.price)
      if (currentPriceOrders) {
        for (const [orderRef, orderInfo] of currentPriceOrders.entries()) {
          if (orderInfo.isClosing === isClosing) {
            allRefsToCancel.push(orderRef)
          }
        }
      }
    }

    // 如果有需要撤销的订单，发送撤销+重新挂单事件
    if (allRefsToCancel.length > 0) {
      emit('replaceOrder', 'buy', item.price, quantity, isRightClick, allRefsToCancel)
    } else {
      // 发送普通下单事件（B模式下同价位会累加）
      emit('placeOrder', 'buy', item.price, quantity, isRightClick, false)
    }
  } else {
    return
  }
}

// 创建防抖版本的卖量点击处理函数
const debouncedSellVolumeClick = debounce((item: OrderData, isRightClick: boolean) => {
  let quantity = isRightClick ? props.heavyOrderQuantity : props.lightOrderQuantity
  
  // 右键点击多单区域进行市价卖出平仓时，使用实际多单持仓量
  if (item.section === 'buy' && isRightClick && props.longPosition) {
    if (props.longPosition > 0) {
      quantity = props.longPosition
    }
  }
  
  if (item.section === 'buy') {
    // 多单区域第四列：市价卖出平仓
    executeMarketSellOrder(quantity, isRightClick)
  } else if (item.section === 'sell') {
    // 空单区域第四列：正常挂空单

    // 判断当前挂单是否为平仓单
    const isClosing = isClosingOrderByPosition('sell')

    // A模式限制检查（传入isClosing参数，区分开仓单和平仓单）
    const aModeCheck = canPlaceOrderInAMode('sell', item.price, isClosing)

    // 收集所有需要撤销的【同类型】订单引用
    let allRefsToCancel: string[] = []

    if (!aModeCheck.canPlace && aModeCheck.existingPrices.length > 0) {
      // A模式下，如果其他价位有同类型挂单，先收集这些订单的引用
      for (const existingPrice of aModeCheck.existingPrices) {
        const priceOrders = sellPendingOrders.value.get(existingPrice)
        if (priceOrders) {
          // 只收集同类型订单的引用
          for (const [orderRef, orderInfo] of priceOrders.entries()) {
            if (orderInfo.isClosing === isClosing) {
              allRefsToCancel.push(orderRef)
            }
          }
        }
      }
    }

    // 检查当前价位是否有同类型的未成交订单
    // 优化：B模式下同价位挂单不撤销，而是累加；A模式下才撤销
    if (props.orderType === 'A') {
      const currentPriceOrders = sellPendingOrders.value.get(item.price)
      if (currentPriceOrders) {
        for (const [orderRef, orderInfo] of currentPriceOrders.entries()) {
          if (orderInfo.isClosing === isClosing) {
            allRefsToCancel.push(orderRef)
          }
        }
      }
    }

    // 如果有需要撤销的订单，发送撤销+重新挂单事件
    if (allRefsToCancel.length > 0) {
      emit('replaceOrder', 'sell', item.price, quantity, isRightClick, allRefsToCancel)
    } else {
      // 发送普通下单事件（B模式下同价位会累加）
      emit('placeOrder', 'sell', item.price, quantity, isRightClick, false)
    }
  } else {
    return
  }
}, 500) // 0.5秒防抖

// 处理卖量列点击（空单区域挂空单 + 多单区域市价卖出）
const handleSellVolumeClick = (item: OrderData, index: number, event: MouseEvent) => {
  if (item.isSeparator) return

  const isRightClick = event.button === 2 || event.type === 'contextmenu'

  // 检查是否开启防连点
  if (props.options?.noCombo) {
    debouncedSellVolumeClick(item, isRightClick)
    return
  }

  let quantity = isRightClick ? props.heavyOrderQuantity : props.lightOrderQuantity
  
  // 右键点击多单区域进行市价卖出平仓时，使用实际多单持仓量
  if (item.section === 'buy' && isRightClick && props.longPosition) {
    if (props.longPosition > 0) {
      quantity = props.longPosition
    }
  }
  
  if (item.section === 'buy') {
    // 多单区域第四列：市价卖出平仓
    executeMarketSellOrder(quantity, isRightClick)
  } else if (item.section === 'sell') {
    // 空单区域第四列：正常挂空单

    // 判断当前挂单是否为平仓单
    const isClosing = isClosingOrderByPosition('sell')

    // A模式限制检查（传入isClosing参数，区分开仓单和平仓单）
    const aModeCheck = canPlaceOrderInAMode('sell', item.price, isClosing)

    // 收集所有需要撤销的【同类型】订单引用
    let allRefsToCancel: string[] = []

    if (!aModeCheck.canPlace && aModeCheck.existingPrices.length > 0) {
      // A模式下，如果其他价位有同类型挂单，先收集这些订单的引用
      for (const existingPrice of aModeCheck.existingPrices) {
        const priceOrders = sellPendingOrders.value.get(existingPrice)
        if (priceOrders) {
          // 只收集同类型订单的引用
          for (const [orderRef, orderInfo] of priceOrders.entries()) {
            if (orderInfo.isClosing === isClosing) {
              allRefsToCancel.push(orderRef)
            }
          }
        }
      }
    }

    // 检查当前价位是否有同类型的未成交订单
    // 优化：B模式下同价位挂单不撤销，而是累加；A模式下才撤销
    if (props.orderType === 'A') {
      const currentPriceOrders = sellPendingOrders.value.get(item.price)
      if (currentPriceOrders) {
        for (const [orderRef, orderInfo] of currentPriceOrders.entries()) {
          if (orderInfo.isClosing === isClosing) {
            allRefsToCancel.push(orderRef)
          }
        }
      }
    }

    // 如果有需要撤销的订单，发送撤销+重新挂单事件
    if (allRefsToCancel.length > 0) {
      emit('replaceOrder', 'sell', item.price, quantity, isRightClick, allRefsToCancel)
    } else {
      // 发送普通下单事件（B模式下同价位会累加）
      emit('placeOrder', 'sell', item.price, quantity, isRightClick, false)
    }
  } else {
    return
  }
}

// 获取买单未成交数量
const getBuyOrderCount = (price: number): number => {
  const priceOrders = buyPendingOrders.value.get(price)
  if (!priceOrders) return 0

  let totalQuantity = 0
  for (const orderInfo of Array.from(priceOrders.values())) {
    totalQuantity += orderInfo.quantity
  }
  return totalQuantity
}

// 获取卖单未成交数量
const getSellOrderCount = (price: number): number => {
  const priceOrders = sellPendingOrders.value.get(price)
  if (!priceOrders) return 0

  let totalQuantity = 0
  for (const orderInfo of Array.from(priceOrders.values())) {
    totalQuantity += orderInfo.quantity
  }
  return totalQuantity
}

// 获取买单显示前缀（k+或p+）
const getBuyOrderDisplayPrefix = (price: number): string => {
  // 获取该价位的买单信息
  const priceOrders = buyPendingOrders.value.get(price)
  if (!priceOrders) return 'k'

  // 检查是否有平仓单
  const hasClosingOrders = Array.from(priceOrders.values()).some(orderInfo => orderInfo.isClosing)
  return hasClosingOrders ? 'p' : 'k'
}

// 获取卖单显示前缀（k+或p+）
const getSellOrderDisplayPrefix = (price: number): string => {
  // 获取该价位的卖单信息
  const priceOrders = sellPendingOrders.value.get(price)
  if (!priceOrders) return 'k'

  // 检查是否有平仓单
  const orderInfos = Array.from(priceOrders.values())
  const hasClosingOrders = orderInfos.some(orderInfo => orderInfo.isClosing)
  return hasClosingOrders ? 'p' : 'k'
}

// 获取指定价位的未成交订单引用列表
const getBuyOrderRefs = (price: number): string[] => {
  const priceOrders = buyPendingOrders.value.get(price)
  return priceOrders ? Array.from(priceOrders.keys()) : []
}

const getSellOrderRefs = (price: number): string[] => {
  const priceOrders = sellPendingOrders.value.get(price)
  return priceOrders ? Array.from(priceOrders.keys()) : []
}

// A模式限制检查：检查是否可以在新价位挂单（优化版：区分开仓单和平仓单）
const canPlaceOrderInAMode = (orderType: 'buy' | 'sell', targetPrice: number, isClosingOrder: boolean = false): { canPlace: boolean, existingPrices: number[], message: string } => {
  if (props.orderType !== 'A') {
    // B模式不限制
    return { canPlace: true, existingPrices: [], message: '' }
  }

  // 先清理空的挂单数据，避免残留数据影响判断
  cleanupEmptyPendingOrders()

  // A模式：检查是否已有其他价位的【同类型】挂单
  // 关键优化：开仓单(k+)和平仓单(p+)分别检查，互不影响
  const existingPrices: number[] = []

  if (orderType === 'buy') {
    // 检查买单区域是否已有其他价位的【同类型】挂单
    for (const [price, priceOrders] of Array.from(buyPendingOrders.value.entries())) {
      if (price === targetPrice) continue // 跳过目标价位

      // 检查该价位是否有同类型的订单
      const orderInfos = Array.from(priceOrders.values())
      const hasSameTypeOrders = orderInfos.some(orderInfo => orderInfo.isClosing === isClosingOrder)

      if (hasSameTypeOrders) {
        const count = orderInfos
          .filter(orderInfo => orderInfo.isClosing === isClosingOrder)
          .reduce((sum, orderInfo) => sum + orderInfo.quantity, 0)

        if (count > 0) {
          existingPrices.push(price)
        }
      }
    }
  } else {
    // 检查卖单区域是否已有其他价位的【同类型】挂单
    for (const [price, priceOrders] of Array.from(sellPendingOrders.value.entries())) {
      if (price === targetPrice) continue // 跳过目标价位

      // 检查该价位是否有同类型的订单
      const orderInfos = Array.from(priceOrders.values())
      const hasSameTypeOrders = orderInfos.some(orderInfo => orderInfo.isClosing === isClosingOrder)

      if (hasSameTypeOrders) {
        const count = orderInfos
          .filter(orderInfo => orderInfo.isClosing === isClosingOrder)
          .reduce((sum, orderInfo) => sum + orderInfo.quantity, 0)

        if (count > 0) {
          existingPrices.push(price)
        }
      }
    }
  }

  if (existingPrices.length > 0) {
    const areaName = orderType === 'buy' ? '多单区域' : '空单区域'
    const orderTypeName = isClosingOrder ? '平仓单(p+)' : '开仓单(k+)'
    const message = `A模式限制：${areaName}已在价位 [${existingPrices.join(', ')}] 有${orderTypeName}，同类型挂单只能在一个价位`
    return { canPlace: false, existingPrices, message }
  }

  return { canPlace: true, existingPrices: [], message: '' }
}

// 买量显示控制：根据区域类型决定是否显示买量
const getBuyVolumeDisplay = (item: any): string => {
  try {
    // 空单区域（sell section）：不显示买量
    if (item.section === 'sell') {
      return ''
    }
    
    // 多单区域（buy section）：显示买量
    if (item.section === 'buy') {
      return item.buyVolume || ''
    }
    
    // 分割线或其他：不显示
    return ''
  } catch (error) {
    return ''
  }
}

// 卖量显示控制：根据区域类型决定是否显示卖量
const getSellVolumeDisplay = (item: any): string => {
  try {
    // 多单区域（buy section）：不显示卖量
    if (item.section === 'buy') {
      return ''
    }
    
    // 空单区域（sell section）：显示卖量
    if (item.section === 'sell') {
      return item.sellVolume || ''
    }
    
    // 分割线或其他：不显示
    return ''
  } catch (error) {
    return ''
  }
}

// 获取市价单显示（第五列）- 只显示数字
const getMarketOrderDisplay = (item: any): string => {
  try {
    // 跳过分割线
    if (item.isSeparator) {
      return ''
    }

    // 检查该价格是否有市价单数据
    const marketBuyQuantity = marketBuyOrders.value.get(item.price) || 0
    const marketSellQuantity = marketSellOrders.value.get(item.price) || 0

    // 优先显示市价买入，其次显示市价卖出
    if (marketBuyQuantity > 0) {
      return marketBuyQuantity.toString()
    } else if (marketSellQuantity > 0) {
      return marketSellQuantity.toString()
    }

    return ''
  } catch (error) {
    return ''
  }
}

// 获取市价单样式类（第五列背景色）
const getMarketOrderClass = (item: any): string => {
  try {
    // 跳过分割线
    if (item.isSeparator) {
      return ''
    }

    // 检查该价格的市价单类型
    const marketBuyQuantity = marketBuyOrders.value.get(item.price) || 0
    const marketSellQuantity = marketSellOrders.value.get(item.price) || 0

    if (marketBuyQuantity > 0) {
      // 有市价买入订单，显示蓝色背景
      return 'market-order-buy'
    } else if (marketSellQuantity > 0) {
      // 有市价卖出订单，显示红色背景
      return 'market-order-sell'
    }

    return ''
  } catch (error) {
    return ''
  }
}

// 订单状态管理函数 - 新版本，使用正确的数据结构
const addPendingOrder = (orderType: 'buy' | 'sell', price: number, orderRef: string, quantity: number, isClosing: boolean = false) => {
  if (orderType === 'buy') {
    // 获取或创建该价格的订单Map
    let priceOrders = buyPendingOrders.value.get(price)
    if (!priceOrders) {
      priceOrders = new Map()
      buyPendingOrders.value.set(price, priceOrders)
    }

    // 设置或更新该订单引用的数量和类型
    priceOrders.set(orderRef, {quantity, isClosing})
  } else {
    // 获取或创建该价格的订单Map
    let priceOrders = sellPendingOrders.value.get(price)
    if (!priceOrders) {
      priceOrders = new Map()
      sellPendingOrders.value.set(price, priceOrders)
    }

    // 设置或更新该订单引用的数量和类型
    priceOrders.set(orderRef, {quantity, isClosing})
  }
}

const removePendingOrder = (orderType: 'buy' | 'sell', price: number, orderRef: string, quantity: number) => {

  if (orderType === 'buy') {
    const priceOrders = buyPendingOrders.value.get(price)
    if (priceOrders) {
      // 移除该订单引用
      priceOrders.delete(orderRef)

      // 如果该价格没有订单了，删除整个价格条目
      if (priceOrders.size === 0) {
        buyPendingOrders.value.delete(price)
      }
    }
  } else {
    const priceOrders = sellPendingOrders.value.get(price)
    if (priceOrders) {
      // 移除该订单引用
      priceOrders.delete(orderRef)

      // 如果该价格没有订单了，删除整个价格条目
      if (priceOrders.size === 0) {
        sellPendingOrders.value.delete(price)
      }
    }
  }
}

// 清空所有未成交订单显示
const clearAllPendingOrders = () => {
  buyPendingOrders.value.clear()
  sellPendingOrders.value.clear()
}

// 清除市价单显示（成交后调用）
const clearMarketOrderDisplay = (orderType: 'buy' | 'sell', price: number) => {
  // 清除该价位的所有市价单显示（买入和卖出都清除）
  const hadMarketBuy = marketBuyOrders.value.has(price)
  const hadMarketSell = marketSellOrders.value.has(price)

  if (hadMarketBuy) {
    marketBuyOrders.value.delete(price)
  }

  if (hadMarketSell) {
    marketSellOrders.value.delete(price)
  }

  if (!hadMarketBuy && !hadMarketSell) {
  }
}

// 清除所有市价单显示
const clearAllMarketOrderDisplay = () => {
  marketBuyOrders.value.clear()
  marketSellOrders.value.clear()

}

// 设置最近成交价位和类型
const setRecentlyFilledInfo = (price: number, type: 'buy' | 'sell') => {
  recentlyFilledInfo.value = { price, type };
};

// 清除最近成交价位
const clearRecentlyFilledPrice = () => {
  const oldPrice = recentlyFilledInfo.value.price;
  recentlyFilledInfo.value = { price: null, type: null };
};

// 获取第三列价格的样式类（包含最近成交效果）
const getPriceColumnClass = (item: any): string => {
  const baseClass = item.section === 'buy' ? 'buy-price' : 'sell-price';

  // 如果是最近成交的价位，添加变浅效果
  if (recentlyFilledInfo.value.price === item.price) {
    return `${baseClass} recently-filled`;
  }

  return baseClass;
};

// 跟踪因成交而消失的订单价位和对应的区域类型
const filledOrderPrices = ref<Map<number, 'buy' | 'sell'>>(new Map());

// 记录订单成交后的填充信息
const recordFilledOrderFill = (price: number, section: 'buy' | 'sell') => {
  // 清除之前所有价位的填充
  filledOrderPrices.value.clear();
  // 设置新的填充价位
  filledOrderPrices.value.set(price, section);
};

// 清除指定价位的填充记录（当重新挂单时调用）
const clearPriceFillRecord = (price: number) => {
  if (filledOrderPrices.value.has(price)) {
    filledOrderPrices.value.delete(price);
  }
};

// 获取第一列的填充背景样式
const getFirstColumnFillClass = (item: any): string => {
  // 检查是否有k+/p+数字
  const hasOrders = getBuyOrderCount(item.price) > 0 || getSellOrderCount(item.price) > 0;

  // 如果有k+/p+数字，清除该价位的填充记录，不填充背景
  if (hasOrders) {
    clearPriceFillRecord(item.price);
    return '';
  }

  // 如果没有k+/p+数字，检查是否是因成交而需要填充的价位
  const filledSection = filledOrderPrices.value.get(item.price);
  if (filledSection) {
    // 根据成交订单的区域类型填充对应的浅色背景
    if (filledSection === 'buy') {
      return 'section-buy-fill'; // 多单区域浅蓝色背景
    }
    if (filledSection === 'sell') {
      return 'section-sell-fill'; // 空单区域浅红色背景
    }
  }

  return '';
};

// 获取所有有挂单的价位（用于A模式限制检查）
const getAllPendingOrderPrices = (orderType: 'buy' | 'sell'): number[] => {
  const prices: number[] = []

  if (orderType === 'buy') {
    for (const [price] of Array.from(buyPendingOrders.value.entries())) {
      const count = getBuyOrderCount(price)
      if (count > 0) {
        prices.push(price)
      }
    }
  } else {
    for (const [price] of Array.from(sellPendingOrders.value.entries())) {
      const count = getSellOrderCount(price)
      if (count > 0) {
        prices.push(price)
      }
    }
  }

  return prices
}

// 获取指定类型（开仓/平仓）的挂单价位（用于优化后的A模式限制检查）
const getPendingOrderPricesByType = (orderType: 'buy' | 'sell', isClosing: boolean): number[] => {
  const prices: number[] = []

  if (orderType === 'buy') {
    for (const [price, priceOrders] of Array.from(buyPendingOrders.value.entries())) {
      // 检查该价位是否有指定类型的订单
      const orderInfos = Array.from(priceOrders.values())
      const hasSameTypeOrders = orderInfos.some(orderInfo => orderInfo.isClosing === isClosing)

      if (hasSameTypeOrders) {
        const count = orderInfos
          .filter(orderInfo => orderInfo.isClosing === isClosing)
          .reduce((sum, orderInfo) => sum + orderInfo.quantity, 0)

        if (count > 0) {
          prices.push(price)
        }
      }
    }
  } else {
    for (const [price, priceOrders] of Array.from(sellPendingOrders.value.entries())) {
      // 检查该价位是否有指定类型的订单
      const orderInfos = Array.from(priceOrders.values())
      const hasSameTypeOrders = orderInfos.some(orderInfo => orderInfo.isClosing === isClosing)

      if (hasSameTypeOrders) {
        const count = orderInfos
          .filter(orderInfo => orderInfo.isClosing === isClosing)
          .reduce((sum, orderInfo) => sum + orderInfo.quantity, 0)

        if (count > 0) {
          prices.push(price)
        }
      }
    }
  }

  return prices
}

// 监听数据变化，重新计算可见行数
watch(() => props.processedOrderBook, () => {
  if (!allowScroll.value) {
    // 根据容器高度动态计算可见行数
    calculateVisibleRows()
  }
}, { deep: true })

// 监听行高变化，重新计算渲染数据
watch(() => props.cellHeight, (newHeight, oldHeight) => {
  if (newHeight !== oldHeight && !allowScroll.value) {
    // 行高变化时重新计算可见行数，确保表格铺满容器
    calculateVisibleRows()
  }
}, { immediate: false })

// 计算可见行数
const calculateVisibleRows = () => {
  if (!tableContainer.value) return

  const containerHeight = tableContainer.value.clientHeight
  // 使用动态行高，从props.cellHeight获取当前行高
  const rowHeight = props.cellHeight || 18

  // 计算总共能显示多少行，向上取整以确保表格铺满容器
  const totalVisibleRows = Math.ceil(containerHeight / rowHeight)

  // 分割线占1行，剩余行数平分给买卖两个区域
  // 使用向上取整确保有足够的行数填满容器，避免表格间距
  const availableRowsForData = totalVisibleRows - 1
  const rowsPerSection = Math.ceil(availableRowsForData / 2)

  // 确保每个区域至少显示10行，以保证有足够的连贯数据展示
  // 同时根据实际容器高度和行高动态调整，避免间距问题
  visibleRowsPerSection.value = Math.max(10, rowsPerSection)
}

// 窗口大小变化处理函数
const handleResize = debounce(() => {
  if (!allowScroll.value) {
    calculateVisibleRows()
  }
}, 100)

// ResizeObserver 用于监听容器大小变化
let resizeObserver: ResizeObserver | null = null

// 组件挂载后初始化
onMounted(() => {
  // 清除所有市价单显示数据
  clearAllMarketOrderDisplay()

  setTimeout(() => {
    calculateVisibleRows()

    // 设置焦点以便键盘事件能够工作
    if (priceTableContainer.value) {
      priceTableContainer.value.focus()
    }
  }, 100)

  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)

  // 使用 ResizeObserver 监听容器大小变化
  if (tableContainer.value) {
    resizeObserver = new ResizeObserver(handleResize)
    resizeObserver.observe(tableContainer.value)
  }
})

// 组件卸载时清理事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (resizeObserver) {
    resizeObserver.disconnect()
  }
})

// 执行市价买入订单（空单区域第二列点击 - 从卖一价开始逐级买入）
const executeMarketBuyOrder = (totalQuantity: number, isRightClick: boolean) => {

  // 新的市价成交开始时，清除之前的第五列填充显示
  clearAllMarketOrderDisplay()

  // 获取真正的卖一价（市场最低卖出价）
  // 从所有有卖量的价格中找到最低价格作为卖一价
  const allSellPrices = props.processedOrderBook.sell
    .filter(item => item.sellVolume > 0) // 只考虑有卖量的价格
    .map(item => item.price)
    .sort((a, b) => a - b) // 从低到高排序

  // 如果空单区域没有卖量，则从整个订单簿中找卖一价
  let askPrice1: number
  if (allSellPrices.length > 0) {
    askPrice1 = allSellPrices[0] // 空单区域的最低卖价
  } else {
    // 从整个订单簿中找到有卖量的最低价格
    const allItems = [...props.processedOrderBook.buy, ...props.processedOrderBook.sell]
    const sellPricesWithVolume = allItems
      .filter(item => item.sellVolume > 0)
      .map(item => item.price)
      .sort((a, b) => a - b)

    if (sellPricesWithVolume.length === 0) {
      return
    }
    askPrice1 = sellPricesWithVolume[0]
  }

  // 获取用于逐级买入的价格列表（从卖一价开始向上）
  const sellPrices = props.processedOrderBook.sell
    .map(item => item.price)
    .filter(price => price > 0)
    .sort((a, b) => a - b) // 从低到高排序，用于逐级买入

  let remainingQuantity = totalQuantity
  const orderPlan: Array<{price: number, quantity: number}> = []

  // 从卖一价开始逐级买入
  for (const price of sellPrices) {
    if (remainingQuantity <= 0) break

    // 获取该价位的空单挂单数（第四列数据）
    const sellItem = props.processedOrderBook.sell.find(item => item.price === price)
    const availableVolume = sellItem?.sellVolume || 0

    if (availableVolume > 0) {
      // 计算在该价位买入的数量
      const buyQuantity = Math.min(remainingQuantity, availableVolume)
      orderPlan.push({ price, quantity: buyQuantity })
      remainingQuantity -= buyQuantity
    }
  }

  // 如果还有剩余数量，在卖一价挂单
  if (remainingQuantity > 0) {
    orderPlan.push({ price: askPrice1, quantity: remainingQuantity })
  }

  // 在卖一价的第五列显示总买入数量（蓝色背景）
  // 始终在卖一价显示，无论卖一价在哪个区域
  marketBuyOrders.value.set(askPrice1, totalQuantity)

  // 执行订单计划
  for (const order of orderPlan) {
    emit('placeOrder', 'buy', order.price, order.quantity, isRightClick, true) // 最后一个参数标识为市价单
  }
}

// 执行市价卖出订单（多单区域第四列点击 - 从买一价开始逐级卖出）
const executeMarketSellOrder = (totalQuantity: number, isRightClick: boolean) => {

  // 新的市价成交开始时，清除之前的第五列填充显示
  clearAllMarketOrderDisplay()

  // 获取真正的买一价（市场最高买入价）
  // 从所有有买量的价格中找到最高价格作为买一价
  const allBuyPrices = props.processedOrderBook.buy
    .filter(item => item.buyVolume > 0) // 只考虑有买量的价格
    .map(item => item.price)
    .sort((a, b) => b - a) // 从高到低排序

  // 如果多单区域没有买量，则从整个订单簿中找买一价
  let bidPrice1: number
  if (allBuyPrices.length > 0) {
    bidPrice1 = allBuyPrices[0] // 多单区域的最高买价
  } else {
    // 从整个订单簿中找到有买量的最高价格
    const allItems = [...props.processedOrderBook.buy, ...props.processedOrderBook.sell]
    const buyPricesWithVolume = allItems
      .filter(item => item.buyVolume > 0)
      .map(item => item.price)
      .sort((a, b) => b - a)

    if (buyPricesWithVolume.length === 0) {
      return
    }
    bidPrice1 = buyPricesWithVolume[0]
  }

  // 获取用于逐级卖出的价格列表（从买一价开始向下）
  const buyPrices = props.processedOrderBook.buy
    .map(item => item.price)
    .filter(price => price > 0)
    .sort((a, b) => b - a) // 从高到低排序，用于逐级卖出

  let remainingQuantity = totalQuantity
  const orderPlan: Array<{price: number, quantity: number}> = []

  // 从买一价开始逐级卖出
  for (const price of buyPrices) {
    if (remainingQuantity <= 0) break

    // 获取该价位的多单挂单数（第二列数据）
    const buyItem = props.processedOrderBook.buy.find(item => item.price === price)
    const availableVolume = buyItem?.buyVolume || 0

    if (availableVolume > 0) {
      // 计算在该价位卖出的数量
      const sellQuantity = Math.min(remainingQuantity, availableVolume)
      orderPlan.push({ price, quantity: sellQuantity })
      remainingQuantity -= sellQuantity

    }
  }

  // 如果还有剩余数量，在买一价挂单
  if (remainingQuantity > 0) {
    orderPlan.push({ price: bidPrice1, quantity: remainingQuantity })
  }

  // 在买一价的第五列显示总卖出数量（红色背景）
  // 始终在买一价显示，无论买一价在哪个区域
  marketSellOrders.value.set(bidPrice1, totalQuantity)

  // 执行订单计划
  for (const order of orderPlan) {
    emit('placeOrder', 'sell', order.price, order.quantity, isRightClick, true) // 最后一个参数标识为市价单
  }
}

// 清理空的挂单数据（移除数量为0的价位）
const cleanupEmptyPendingOrders = () => {
  // 清理买单
  const buyPricesToRemove = []
  for (const [price, priceOrders] of Array.from(buyPendingOrders.value.entries())) {
    if (priceOrders.size === 0 || getBuyOrderCount(price) === 0) {
      buyPricesToRemove.push(price)
    }
  }

  buyPricesToRemove.forEach(price => {
    buyPendingOrders.value.delete(price)
  })

  // 清理卖单
  const sellPricesToRemove = []
  for (const [price, priceOrders] of Array.from(sellPendingOrders.value.entries())) {
    if (priceOrders.size === 0 || getSellOrderCount(price) === 0) {
      sellPricesToRemove.push(price)
    }
  }

  sellPricesToRemove.forEach(price => {
    sellPendingOrders.value.delete(price)
  })

}

// 检查特定价位的挂单详情
const checkPriceOrderDetails = (orderType: 'buy' | 'sell', price: number) => {

  if (orderType === 'buy') {
    const priceOrders = buyPendingOrders.value.get(price)
    if (!priceOrders) {
      return
    }
    if (priceOrders.size === 0) {
      buyPendingOrders.value.delete(price)
    }
  } else {
    const priceOrders = sellPendingOrders.value.get(price)
    if (!priceOrders) {
      return
    }
    if (priceOrders.size === 0) {
      sellPendingOrders.value.delete(price)
    }
  }
}

defineExpose({
  tableContainer,
  allowScroll,
  visibleRowsPerSection,
  addPendingOrder,
  removePendingOrder,
  getBuyOrderRefs,
  getSellOrderRefs,
  getBuyOrderCount,
  getSellOrderCount,
  getAllPendingOrderPrices,
  getPendingOrderPricesByType,  // 新增：获取指定类型的挂单价位
  clearAllPendingOrders,
  cleanupEmptyPendingOrders,
  checkPriceOrderDetails,
  clearMarketOrderDisplay,
  clearAllMarketOrderDisplay,
  setRecentlyFilledInfo,
  clearRecentlyFilledPrice,
  cancelScrollMode,
  restoreCenterView,
  recordFilledOrderFill  // 新增：记录成交订单填充
})
</script>

<style scoped>
/* 右侧表格区域 */
.price-table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* 移除最大宽度限制，让表格可以随窗口缩放 */
  overflow: hidden; /* 超出隐藏 */
  /* 确保可以获得焦点 */
  outline: none;
  color: #fff !important;
}


.price-table {
  flex: 1;
  overflow: hidden;  /* 隐藏溢出内容，允许顶部和底部显示不全 */
  background: #ffffff;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%; /* 确保表格占满容器高度 */
}

.price-table-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 启用滚动模式 */
.price-table.scrollable {
  overflow-y: auto;  /* 点击价格列后允许垂直滚动 */
}

/* 隐藏滚动条但保持滚动功能 */
.price-table.scrollable::-webkit-scrollbar {
  width: 0px;  /* 隐藏滚动条 */
  background: transparent;  /* 透明背景 */
}

.price-table.scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.price-table.scrollable::-webkit-scrollbar-thumb {
  background: transparent;
}

.price-table.scrollable::-webkit-scrollbar-thumb:hover {
  background: transparent;
}

/* 统一的价格表格 */
.price-table {
  flex: 1;
  background: #c6c3c8;
  display: flex;
  flex-direction: column;
  height: 100%; /* 确保表格占满容器高度 */
  position: relative; /* 为分割线定位提供参考 */
  justify-content: space-between; /* 均匀分布，确保铺满容器 */
  align-items: stretch; /* 确保行宽度填满容器 */
}

/* 移除独立分割线，现在直接在占位符上显示 */

.price-row {
  display: grid;
  grid-template-columns: 1fr minmax(27px, 1fr) minmax(30px, 1fr) minmax(27px, 1fr) 1fr;
  font-size: v-bind('fontSize + "px"');
  background-color: #94989d;
  align-items: center;
  height: v-bind('(cellHeight || 18) + "px"');
  min-height: v-bind('(cellHeight || 18) + "px"');
  flex-shrink: 0; /* 防止行被压缩 */
  overflow: hidden; /* 超出隐藏 */
}

.price-row > div {
  height: v-bind('(cellHeight || 18) + "px"');
  min-height: v-bind('(cellHeight || 18) + "px"');
  text-align: center;
  line-height: v-bind('(cellHeight || 18) + "px"');
  overflow: hidden; /* 超出隐藏 */
  border: 1.5px solid #312727;
  margin-left: -1.5px;
  /* margin-top: -1.5px; */
  
  &.price-separator-placeholder {
    height: 2px;  /* 很小的高度，只作为分割线空间 */
    min-height: 2px;
  }
}

/* 第一列不需要左边距 */
.price-row > div:first-child {
  margin-left: 0;
} /* 第一行不需要上边距 */

/* 分割线占位符样式 */
.separator-row {
  height: 2px;  /* 很小的高度，只作为分割线空间 */
  min-height: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  flex-shrink: 0; /* 防止分割线行被压缩 */
  position: relative; /* 为绝对定位的分割线提供参考 */
}

.price-separator-placeholder {
  width: 100%;
  height: 18px;
  background: #414141; /* 显示分割线 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 卖盘行样式 - 只有价格列显示红色 */
.sell-row .price-col {
  background: #ff0000;
  color: #ffffff;
}

/* 买盘行样式 - 只有价格列显示蓝色 */
.buy-row .price-col {
  background: #0000ff;
  color: #ffffff;
}

/* 通用单元格样式 */
.order-display-col,
.buy-volume-col,
.sell-volume-col,
.total-volume-col {
  text-align: center;
  font-size: v-bind('fontSize + "px"');
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 表格列特殊样式 */
.order-display-col {
  /* background: rgb(153, 152, 152); */
  font-weight: bold;
  color: #414141;
}

/* 第一列可点击状态 */
.order-display-col.clickable {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.order-display-col.clickable:hover {
  /* background-color: rgba(255, 255, 255, 0.1) !important; */ /* hover背景色已移除 */
  border: 1px solid #fff;
}

/* 第一列k+数字和p+数字字体大小 */
.order-count-text {
  font-size: calc(v-bind('fontSize + "px"') * 0.85) !important;
}

/* 区域填充背景样式 - k+/p+数字消失后的浅色填充 */
.order-display-col.section-buy-fill {
  background: #ef1ed3 !important; /* 多单区域浅蓝色背景 */
}

.order-display-col.section-sell-fill {
  background: #ef1ed3 !important; /* 空单区域浅红色背景 */
}

/* 量列通用样式 */
.buy-volume-col,
.sell-volume-col,
.total-volume-col {
  /* font-weight: normal; */
  background: inherit;
}

/* 可点击列样式 */
.buy-volume-col,
.sell-volume-col {
  /* cursor: pointer; */
  color: #fff;
}

/* 总量列特殊样式 */
.total-volume-col {
  color: #414141;
}
.clickable {
  cursor: pointer;
}

.clickable.active {
  background: #008000 !important;
  color: #ffffff !important;
  font-weight: bold;
}


/* 挂单数量显示样式 */
.col-value {
  font-size: v-bind('fontSize + "px"');
  padding: 2px;
  border-radius: 2px;
  display: inline-block;
  min-width: 20px;
  text-align: center;
  box-sizing: border-box;
}

.buy-count {
  /* 白色文字 */
  color: white;
  font-size: 16px;
  /* font-weight: bold; */
}

.sell-count {
  /* 白色文字 */
  color: white;
  font-size: 16px;
  /* font-weight: bold; */
}

.cancel-symbol {
  color: #666;
  font-weight: bold;
}

/* 有我的订单时的高亮样式 - 需求4&5 */
.buy-volume-col.has-my-orders {
  background-color: rgba(255, 107, 107, 0.15) !important;
  color: #ff6b6b !important;
  font-weight: bold !important;
}

.sell-volume-col.has-my-orders {
  background-color: rgba(81, 207, 102, 0.15) !important;
  color: #51cf66 !important;
  font-weight: bold !important;
}

/* 滚动条样式 */
.price-table::-webkit-scrollbar {
  width: 5px;
}

.price-table::-webkit-scrollbar-track {
  background: #c0c0c0;
  border-radius: 4px;
}

.price-table::-webkit-scrollbar-thumb {
  background: #414141;
  border-radius: 4px;
}

.price-table::-webkit-scrollbar-thumb:hover {
  background: #606060;
}

/* 市价单数字显示样式 */
.market-order-number {
  font-size: v-bind('fontSize + "px"');
  font-weight: bold;
  display: inline-block;
  text-align: center;
  padding: 2px 6px;
  border-radius: 3px;
  min-width: 20px;
}

/* 空单区域第二列市价买入时，背景色使用多单区第三列的颜色（蓝色） */
.market-order-buy {
  background-color: #289472ff;  /* 多单区第三列的蓝色 */
  color: white;
}

/* 多单区域第四列市价卖出时，背景色使用空单区第三列的颜色（红色） */
.market-order-sell {
  background-color: #cf3e20ff;  /* 空单区第三列的红色 */
  color: white;
}

/* 最近成交价位的颜色变浅效果 */
.buy-price.recently-filled {
  /* opacity: 0.6 !important; */
  transition: opacity 0.3s ease;
  background: #ef1ed3 !important;
}

.sell-price.recently-filled {
  /* opacity: 0.6 !important; */
  transition: opacity 0.3s ease;
  background: #ef1ed3  !important;
}
</style>
